<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import anlyze from '../../apis/anlyze.js'

const chart = ref(null)

const fetchData = async () => {
  try {
    const res = await anlyze.getVolunteersRating()

    // 你这里res就是map对象，不是res.data
    const chartData = Object.entries(res).map(([key, value]) => ({
      name: key,
      value: value
    }))

    const option = {
      title: {
        text: '志愿者评分分布',
        left: 'center'
      },
      tooltip: { trigger: 'item' },
      legend: { top: '10%', left: 'center' },
      series: [
        {
          name: '评分',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          padAngle: 5,
          itemStyle: { borderRadius: 10 },
          label: { show: false, position: 'center' },
          emphasis: {
            label: {
              show: true,
              fontSize: 30,
              fontWeight: 'bold'
            }
          },
          labelLine: { show: false },
          data: chartData
        }
      ]
    }

    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
  } catch (error) {
    console.error('获取数据失败:', error)
  }
}

onMounted(fetchData)
</script>

<template>

  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>
